<template>
  <div class="booklist">
    <Search />
    <div class="booklist_img">
      <img src="../../assets/image/my/my (5).png" alt="" class="booklist_img" />
    </div>
    <div class="booklist_box3">
      <div class="bookList_top">
        书号：<input v-model="input" placeholder="请输入书号" /> 书号：<input
          v-model="input"
          placeholder="请输入书号"
        />
        版次:<input v-model="input" placeholder="请输入书号" /> 是否出版:<input
          v-model="input"
          placeholder="请输入书号"
        />
        适用对象:<input v-model="input" placeholder="请输入书号" /> 版本:<input
          v-model="input"
          placeholder="请输入书号"
        />
      </div>
      <div class="bookList_bottom">
        <span style="padding-left: 10px">学科：</span
        ><input
          v-model="input"
          placeholder="请输入书号"
          style="margin-left: 22px"
        />
        <span style="padding-left: 25px">专业：</span
        ><input
          v-model="input"
          placeholder="请输入书号"
          style="margin-left: 22px"
        />
        <span class="demonstration" style="padding-left: 10px">出版时间:</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left: 18px"
        >
        </el-date-picker>
        <span class="btn_1">
          搜&nbsp;&nbsp;&emsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;索
        </span>
        <span class="btn_2">
          重&nbsp;&nbsp;&emsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至
        </span>
      </div>
    </div>

    <div class="booklist_box4">
      <div class="boxs_4">
        <div class="new_top">
          <el-table
            :data="tableData"
            height="804px"
            width="1310px"
            class="tableBox"
            :header-cell-style="{
              height: '37px',

              background: '#F3E3E4',

              color: '#000000',

              padding: '0 20px',
            }"
            :row-style="{
              height: '153px',

              background: '#F2F2F2',

              color: '#000000',
            }"
          >
            <el-table-column prop="image" label="图片">
                   <template slot-scope="scope">
                　　　　<img
                  :src="scope.row.img"
                  width="86"
                  height="108"
                  @click="skip"
                />
                　　</template
              >
            </el-table-column>
            <el-table-column prop="number" label="书号"> </el-table-column>
            <el-table-column prop="book" label="书名"> </el-table-column>
            <el-table-column prop="author" label="作者"> </el-table-column>
            <el-table-column prop="subkect" label="学科"> </el-table-column>
            <el-table-column prop="sub" label="专业"> </el-table-column>
            <el-table-column prop="pub" label="出版社"> </el-table-column>
            <el-table-column prop="price" label="定价"> </el-table-column>
            <el-table-column prop="pubtime" label="出版时间"> </el-table-column>
            <el-table-column prop="obj" label="试用对象" > </el-table-column>
            <el-table-column prop="obj" label="">
              <template>
                <i class="el-icon-shopping-cart-2 gwc"></i>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <img
              src="@/assets/image/book/10.png"
              alt=""
              class="dinwgei_img_1"
            />
          </div>
          <div>
            <img
              src="@/assets/image/book/11.png"
              alt=""
              class="dinwgei_img_2"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="booklist_boo5">
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        :total="1000"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        style="margin-left: 416px"
        >>
      </el-pagination>
    </div>
    <Bottom />
  </div>
</template>

<script>
import Search from '../../components/Search'
import Bottom from '../../components/Bottom'
export default {
  components: {
    Search,
    Bottom
  },
  methods: {
    skip() {
      this.$router.push('/index/particulars')
    }
  },
  data() {
    return {
      input: '',
      tableData: [{
        img: require('@/assets/image/book/1.png'),
        number: '王小虎',
        book: '1518',
        author: '阿三',
        subkect: '111',
        sub: '历史',
        pub: '商务',
        price: '999',
        pubtime: '2019',
        obj: '学生',
        dd: 'el - icon - shopping - cart - 2'
      },

      {
        img: require('@/assets/image/book/2.png'),
        number: '王小虎',
        book: '1518',
        author: '阿三',
        subkect: '111',
        sub: '历史',
        pub: '商务',
        price: '999',
        pubtime: '2019',
        obj: '学生'
      },
      {
        img: require('@/assets/image/book/3.png'),
        number: '王小虎',
        book: '1518',
        author: '阿三',
        subkect: '111',
        sub: '历史',
        pub: '商务',
        price: '999',
        pubtime: '2019',
        obj: '学生'
      },
      {
        img: require('@/assets/image/book/3.png'),
        number: '王小虎',
        book: '1518',
        author: '阿三',
        subkect: '111',
        sub: '历史',
        pub: '商务',
        price: '999',
        pubtime: '2019',
        obj: '学生'
      },
      {
        img: require('@/assets/image/book/3.png'),
        number: '王小虎',
        book: '1518',
        author: '阿三',
        subkect: '111',
        sub: '历史',
        pub: '商务',
        price: '999',
        pubtime: '2019',
        obj: '学生'
      }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(
              start.getTime() - 3600 * 1000 * 24 * 7
            )
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(
              start.getTime() - 3600 * 1000 * 24 * 30
            )
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(
              start.getTime() - 3600 * 1000 * 24 * 90
            )
            picker.$emit('pick', [strt, end])
          }
        }
        ]
      },
      value1: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10)
      ],
      value2: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.dinwgei_img_1 {
  width: 41px;
  height: 40px;
  right: -42px;
  top: 5px;
  position: absolute;
}

.dinwgei_img_2 {
  width: 41px;
  height: 40px;
  position: absolute;
  right: -42px;
  top: 48px;
}

.booklist_boo5 {
  width: 1310px;
  height: 82px;
  background: #f2f2f2ff;
  margin: 0 auto;
}

.booklist {
  width: 100%;
  height: 100%;

  .booklist_img {
    width: 100%;
    height: 105px;
  }

  .booklist_box4 {
    width: 100%;
    height: 804px;
    position: relative;

    .boxs_4 {
      width: 1310px;
      height: 804px;
      margin: 0 auto;
      background: #f2f2f2;
    }

    .new_top {
      background: #f2f2f2;
      position: relative;
    }
  }

  .booklist_box3 {
    width: 1310px;
    height: 172px;
    margin: 0 auto;
  }
}

.bookList_top {
  height: 86px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  line-height: 30px;
  padding-top: 37px;
  font-size: 14px;
  color: #848484;
}

.el-range-editor.el-input__inner {
  width: 270px;
  height: 35px;
}

.bookList_bottom {
  height: 86px;
  width: 100%;
  display: flex;
  font-size: 14px;
  color: #848484;
  padding-top: 25px;
  line-height: 30px;

  .btn_1 {
    width: 85px;
    height: 31px;
    border-radius: 20px;
    margin-left: 160px;
    background: #ff8a8a8a;
    color: #960007ff;
    font-size: 14px;
    border: 0;
    text-align: center;
  }

  .btn_2 {
    width: 85px;
    height: 31px;
    border-radius: 20px;
    margin-left: 10px;
    background: #fff;
    color: #960007ff;
    font-size: 14px;
    border: 1px solid #ccc;
    text-align: center;
  }
}

input {
  width: 126px;
  height: 35px;
  padding-left: 20px;
  font-size: 14px;
  color: #848484;
}
.gwc{
  font-size: 30px;
  margin-left:-100px;
  font-weight: 20px·;
}
/deep/ .tableBox {
  padding-top: 2px;
}
/deep/ .el-table .cell{
  padding-left: 20px;
  text-align: center;
}
/deep/ .el-table th>.cell{
  width: 100px;
  padding-left: -10px;
}
</style>
